<template>
  <div class="app-container flex column">
    <top-title :content="content" :updateTime="false" style="padding-left: 0"></top-title>
    <div class="bottom f1 flex">
      <div class="left f1 flex column">
        <div class="left-top p-16">
          <div class="company-title flex">
            <img
              :id="outlookPhoto"
              :data-original="`${imgPrefix + outlookPhoto}`"
              :src="`${imgPrefix + outlookPhoto}`"
              class="cursor"
              @click="werImg(outlookPhoto)"
            />
            <div class="f1 flex column justify-around">
              <div class="company-name">{{ companyInfo.companyName || '暂无' }}</div>
              <div class="company-industry">
                <img alt="" src="@/assets/imgs/companyDetail/hang_ye_icon.png" />
                <span>{{ informationInfo.informationName || '暂无' }}</span>
              </div>
            </div>
          </div>

          <div class="inside-pic">
            <img
              :id="insideLookPhoto"
              :src="imgPrefix + (insideLookPhoto.length > 0 ? insideLookPhoto[0].path : '')"
              class="cursor"
              @click="werImg2('insideLookPhoto')"
            />
            <span class="img-count flex"
              ><img alt="" src="@/assets/imgs/companyDetail/img_count.png" /> {{ insideLookPhoto.length }}张图片</span
            >
            <ul id="insideLookPhoto" style="display: none">
              <li v-for="(item, index) in insideLookPhoto" :key="index">
                <img :data-original="imgPrefix + item.path" :src="imgPrefix + item.path" />
              </li>
            </ul>
          </div>

          <div class="company-address">
            <img alt="" src="@/assets/imgs/companyDetail/location.png" />
            {{ companyInfo.addressDetail || '暂无' }}
          </div>
        </div>
        <div class="left-mid p-16 flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>营业执照信息</span>
          </div>

          <div class="bottom-info f1 flex column justify-around">
            <div class="form-item">
              <div class="label">单位名称:</div>
              <div class="value">{{ companyInfo.businessName || '暂无' }}</div>
            </div>

            <div class="form-item">
              <div class="label">社会信用代码:</div>
              <div class="value">{{ companyInfo.creditCode || '暂无' }}</div>
            </div>

            <div class="form-item">
              <div class="label">营业执照照片:</div>
              <div class="value">
                {{ companyInfo.businessStatus == 0 ? '未完善' : '已完善' || '暂无' }}
                <span v-if="companyInfo.businessStatus == 1" class="click cursor" @click="werImg('businessLicenseUrl')"
                  >查看</span
                >
                <img
                  id="businessLicenseUrl"
                  :data-original="`${imgPrefix}${bessinessDetail.businessLicenseUrl}`"
                  :src="`${imgPrefix}${bessinessDetail.businessLicenseUrl}`"
                  style="display: none"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="left-bot p-16 flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>退出详情</span>
          </div>

          <div class="bottom-info f1 flex column justify-around">
            <div class="form-item">
              <div class="label">提交时间:</div>
              <div class="value">{{ auditInfo.createTime || '暂无' }}</div>
            </div>

            <div class="form-item">
              <div class="label">退出时间:</div>
              <div class="value">{{ outInfo.outTime || '暂无' }}</div>
            </div>

            <div class="form-item">
              <div class="label">操作人员:</div>
              <div class="value">{{ outInfo.outUserName || '暂无' }}</div>
            </div>

            <div class="form-item">
              <div class="label">退出理由:</div>
              <div class="value">{{ outInfo.outMemo || '暂无' }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="mid f2 flex column">
        <div class="mid-top p-16 flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>数据统计</span>
          </div>

          <div class="bottom-common-wrap f1 flex">
            <div class="count-wrap flex f1">
              <img alt="" src="@/assets/imgs/companyDetail/cong_ye_ren_yuan.png" @click="jumpPractitioners" />
              <div class="f1 count-info flex column justify-around">
                <div class="count-column">从业人员/人</div>
                <div class="count-num">{{ personalCount.workPersonCount }}</div>
              </div>
            </div>

            <div class="count-wrap flex f1">
              <img alt="" src="@/assets/imgs/companyDetail/he_ge.png" @click="jumpGoover(1)" />
              <div class="f1 count-info flex column justify-around">
                <div class="count-column">合格检查记录/次</div>
                <div class="count-num c-g">{{ personalCount.checkCount }}</div>
              </div>
            </div>

            <div class="count-wrap flex f1">
              <img alt="" src="@/assets/imgs/companyDetail/bu_he_ge.png" @click="jumpGoover(2)" />
              <div class="f1 count-info flex column justify-around">
                <div class="count-column">不合格检查记录/次</div>
                <div class="count-num c-r">{{ personalCount.checkFailedCount }}</div>
              </div>
            </div>

            <div class="count-wrap flex f1">
              <img alt="" src="@/assets/imgs/companyDetail/ze_ren_shu.png" @click="showSignPage" />
              <div class="f1 count-info flex column justify-around">
                <div class="count-column">责任书/次</div>
                <div class="count-num c-o">{{ personalCount.waitSignCount }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="mid-mid-1 flex">
          <div class="mid-1-left f1 p-16 flex column">
            <div class="common-title">
              <span class="icon"></span>
              <span>法人信息</span>
            </div>

            <div class="bottom-info f1 flex column justify-around">
              <div class="form-item">
                <div class="label">法人姓名:</div>
                <div class="value">{{ legalInfo.legalPersonName || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label">手机号码:</div>
                <div class="value">{{ legalInfo.mobile || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label">身份证号:</div>
                <div class="value">{{ legalInfo.idCard || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label">户籍地址:</div>
                <div class="value">{{ legalInfo.residenceDetail || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label">身份证照片:</div>
                <div v-if="legalInfo.personImage" class="value click" @click="werImg('legalInfoIdPic')">
                  点击查看
                  <img
                    id="legalInfoIdPic"
                    :data-original="`${imgPrefix + legalInfo.personImage}`"
                    :src="`${imgPrefix + legalInfo.personImage}`"
                    style="display: none"
                  />
                </div>
                <div v-else class="value">暂无</div>
              </div>
            </div>
          </div>
          <div class="mid-1-right f1 p-16 flex column">
            <div class="common-title">
              <span class="icon"></span>
              <span>安全负责人信息</span>
            </div>

            <div class="bottom-info f1 flex column justify-around">
              <div class="form-item">
                <div class="label">负责人姓名:</div>
                <div class="value">{{ dutyPersonInfo.dutyPersonName || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label">手机号码:</div>
                <div class="value">{{ dutyPersonInfo.mobile || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label">身份证号:</div>
                <div class="value">{{ dutyPersonInfo.idCard || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label">户籍地址:</div>
                <div class="value">{{ dutyPersonInfo.residenceDetail || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label">身份证照片:</div>
                <div v-if="dutyPersonInfo.personImage" class="value click" @click="werImg('dutyPersonInfoIdPic')">
                  点击查看
                  <img
                    id="dutyPersonInfoIdPic"
                    :data-original="`${imgPrefix + dutyPersonInfo.personImage}`"
                    :src="`${imgPrefix + dutyPersonInfo.personImage}`"
                    style="display: none"
                  />
                </div>
                <div v-else class="value">暂无</div>
              </div>
            </div>
          </div>
        </div>

        <div class="mid-mid-2 p-16 flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>安防信息</span>
          </div>

          <div class="bottom-common-wrap f1 flex">
            <div class="facilities-column f1 flex">
              <img alt="" src="@/assets/imgs/companyDetail/xiao_fang_she_shi.png" />
              <div class="context f1 flex column justify-between">
                <div class="context-name">消防设施</div>
                <div class="context-status">
                  {{ publicSecurityDetail.fireFacilitiesStatus == 1 ? '已完善' : '未完善' }}
                  <span class="jump" @click="showColumnInfo(1, publicSecurityDetail.fireFacilitiesStatus)">></span>
                </div>
              </div>
            </div>

            <div class="facilities-column f1 flex">
              <img alt="" src="@/assets/imgs/companyDetail/wu_fang_she_shi.png" />
              <div class="context f1 flex column justify-between">
                <div class="context-name">物防设施</div>
                <div class="context-status">
                  {{ publicSecurityDetail.physicalDefenseStatus == 1 ? '已完善' : '未完善' }}
                  <span class="jump" @click="showColumnInfo(2, publicSecurityDetail.physicalDefenseStatus)">></span>
                </div>
              </div>
            </div>

            <div class="facilities-column f1 flex">
              <img alt="" src="@/assets/imgs/companyDetail/an_quan_zhi_du.png" />
              <div class="context f1 flex column justify-between">
                <div class="context-name">安全制度</div>
                <div class="context-status">
                  {{ publicSecurityDetail.securitySystemStatus == 1 ? '已完善' : '未完善' }}
                  <span class="jump" @click="showColumnInfo(3, publicSecurityDetail.securitySystemStatus)">></span>
                </div>
              </div>
            </div>

            <div class="facilities-column f1 flex">
              <img alt="" src="@/assets/imgs/companyDetail/ji_fang_she_shi.png" />
              <div class="context f1 flex column justify-between">
                <div class="context-name">技防设施</div>
                <div class="context-status">
                  {{ publicSecurityDetail.securityFacilitiesStatus == 1 ? '已完善' : '未完善' }}
                  <span class="jump" @click="showColumnInfo(4, publicSecurityDetail.securityFacilitiesStatus)">></span>
                </div>
              </div>
            </div>

            <div class="facilities-column f1 flex">
              <img alt="" src="@/assets/imgs/companyDetail/ren_fang_qing_kuang.png" />
              <div class="context f1 flex column justify-between">
                <div class="context-name">人防情况</div>
                <div class="context-status">
                  {{ publicSecurityDetail.airDefenceStatus == 1 ? '已完善' : '未完善' }}
                  <span class="jump" @click="showColumnInfo(5, publicSecurityDetail.airDefenceStatus)">></span>
                </div>
                <!-- <div class="context-status context-active">查看</div> -->
              </div>
            </div>
          </div>
        </div>

        <div class="mid-bot p-16 flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>营业场所信息</span>
          </div>

          <div class="bottom f1 flex">
            <div class="bottom-left flex">
              <div class="bottom-info f1 flex column justify-between">
                <div class="form-item">
                  <div class="label">开业时间:</div>
                  <div class="value">
                    {{
                      companyDetailInfo.openingTime
                        ? companyDetailInfo.openingTime.slice(0, 4) +
                          '年' +
                          companyDetailInfo.openingTime.slice(5, 7) +
                          '月' +
                          companyDetailInfo.openingTime.slice(8, 10) +
                          '日'
                        : '暂无'
                    }}
                  </div>
                </div>

                <div class="form-item">
                  <div class="label">营业面积:</div>
                  <div class="value">{{ companyDetailInfo.businessArea || '暂无' }}㎡</div>
                </div>

                <div class="form-item">
                  <div class="label">房屋结构:</div>
                  <div class="value">
                    {{ getDictType(houseStructureType, companyDetailInfo.houseStructure) }}
                  </div>
                </div>

                <div class="form-item">
                  <div class="label">房屋性质:</div>
                  <div class="value">{{ getDictType(houseNatureType, companyDetailInfo.houseNature) }}</div>
                </div>

                <div class="form-item">
                  <div class="label">房屋所有权:</div>
                  <div class="value">
                    {{ getDictType(houseOwnershipType, companyDetailInfo.houseOwnership) }}
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom-right flex">
              <div class="bottom-info f1 flex column justify-between">
                <div class="info-item">
                  <div class="info">1998年9月1日之前竣工建筑且此后未改建(含装修、用途变更)</div>
                  <div class="boolean">
                    {{
                      companyDetailInfo.onRebuild !== undefined && companyDetailInfo.onRebuild !== null
                        ? companyDetailInfo.onRebuild == 1
                          ? '是'
                          : '否'
                        : '暂无'
                    }}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info">依法通过消防验收</div>
                  <div class="boolean">
                    {{
                      companyDetailInfo.onFireAcceptance !== undefined && companyDetailInfo.onFireAcceptance !== null
                        ? companyDetailInfo.onFireAcceptance == 1
                          ? '是'
                          : '否'
                        : '暂无'
                    }}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info">依法进行竣工验收消防备案</div>
                  <div class="boolean">
                    {{
                      companyDetailInfo.onFireFiling !== undefined && companyDetailInfo.onFireFiling !== null
                        ? companyDetailInfo.onFireFiling == 1
                          ? '是'
                          : '否'
                        : '暂无'
                    }}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info">是否为公众聚集场所</div>
                  <div class="boolean">
                    {{
                      companyDetailInfo.onGatheringPlace !== undefined && companyDetailInfo.onGatheringPlace !== null
                        ? companyDetailInfo.onGatheringPlace == 1
                          ? '是'
                          : '否'
                        : '暂无'
                    }}
                  </div>
                </div>

                <div class="info-item">
                  <div class="info">依法通过投入使用、营业前消防安全检查</div>
                  <div class="boolean">
                    {{
                      companyDetailInfo.onSecurityCheck !== undefined && companyDetailInfo.onSecurityCheck !== null
                        ? companyDetailInfo.onSecurityCheck == 1
                          ? '是'
                          : '否'
                        : '暂无'
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="right f1 flex column">
        <div class="right-top p-16 flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>{{ policeAgencyInfo.policeAgencyName || '暂无' }}</span>
          </div>

          <div class="bottom-info f1 flex column justify-between">
            <div class="form-item">
              <div class="label" style="width: 0.6rem">所属辖区:</div>
              <div class="value">{{ policeJurisdictionInfo.jurisdictionName || '暂无' }}</div>
            </div>

            <div class="form-item">
              <div class="label" style="width: 0.6rem">责任民警:</div>
              <div class="value">{{ policeUserInfo.userName || '暂无' }}</div>
            </div>

            <div class="form-item">
              <div class="label" style="width: 0.6rem">联系方式:</div>
              <div class="value">{{ policeUserInfo.mobile || '暂无' }}</div>
            </div>

            <img
              v-if="policeUserInfo.userImage"
              id="userImage"
              :data-original="`${imgPrefix + policeUserInfo.userImage}`"
              :src="`${imgPrefix + policeUserInfo.userImage}`"
              class="cursor"
              @click="werImg('userImage')"
            />

            <img v-else alt="" src="@/assets/imgs/companyDetail/police_pic.png" />
          </div>
        </div>

        <div class="right-mid p-16 flex column">
          <div class="common-title flex justify-between">
            <div>
              <span class="icon"></span>
              <span>最新检查记录</span>
            </div>

            <div v-if="checkTaskList.length > 0" class="jump cursor" style="color: #1388ff" @click="jumpGoover">
              点击查看数据>
            </div>
          </div>

          <div v-if="checkTaskList.length > 0">
            <div v-for="(item, index) in checkTaskList" :key="index" class="bottom-info f1 flex column justify-between">
              <div class="form-item">
                <div class="label" style="width: 0.6rem">检查时间:</div>
                <div class="value">{{ item.checkTime || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label" style="width: 0.6rem">检查民警:</div>
                <div class="value">{{ item.policeUserName || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label" style="width: 0.6rem">检查类型:</div>
                <div class="value">{{ item.industryExamineName || '暂无' }}</div>
              </div>

              <div class="form-item">
                <div class="label" style="width: 0.6rem">检查结果:</div>
                <div class="value">{{ item.checkResult_dictText || '暂无' }}</div>
              </div>
            </div>
          </div>
          <div v-else class="f1 flex column align-center">
            <img src="@/assets/imgs/companyDetail/no_content.png" style="width: 1.48rem; height: 1.48rem" />
            <div style="font-size: 14px; font-weight: 500; color: #317bc8">暂无检查结果</div>
          </div>
        </div>

        <div class="right-bot p-16 flex column">
          <div class="common-title">
            <span class="icon"></span>
            <span>行业特色功能</span>
          </div>

          <div class="industry-bottom f1 flex">
            <!-- <img src="@/assets/imgs/companyDetail/te_hang_zheng.png" alt="" /> -->

            <div v-for="(item, index) in industryFeaturesList" :key="index" class="industry-info-wrap">
              <img :src="`${imgPrefix + item.iconUrl}`" @click="industryTypeClick(item)" />
              <div class="name">{{ item.industryFeaturesName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <sign-page ref="signPage"></sign-page>
    <air-defence-model ref="airDefenceModel"></air-defence-model>
    <fire-facilities-model ref="fireFacilitiesModel"></fire-facilities-model>
    <physical-defense-model ref="physicalDefenseModel"></physical-defense-model>
    <save-model ref="saveModel"></save-model>
    <security-facilities-model ref="securityFacilitiesModel"></security-facilities-model>

    <certificate-detail ref="certificateDetail"></certificate-detail>
    <tenant ref="tenant"></tenant>
    <industry-info ref="industryInfo"></industry-info>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { companyRecord } from '@/api/company'
import { comMethods } from '@/mixins/comMethods'
import { getAction } from '@/api/manage'
import topTitle from '@/components/topTitle'
import signPage from './signPage'
import fireFacilitiesModel from './fireFacilitiesModel'
import physicalDefenseModel from './physicalDefenseModel'
import saveModel from './saveModel'
import securityFacilitiesModel from './securityFacilitiesModel'
import airDefenceModel from './airDefenceModel'
import certificateDetail from './certificateDetail'
import tenant from './tenant'
import industryInfo from './industryInfo'
import { findEnableDictItemsbyCode } from '@/api/api'

export default {
  components: {
    topTitle,
    signPage,
    airDefenceModel,
    fireFacilitiesModel,
    physicalDefenseModel,
    saveModel,
    securityFacilitiesModel,
    certificateDetail,
    tenant,
    industryInfo,
  },
  mixins: [comMethods],
  data() {
    return {
      content: [['审核记录'], ['退出纳管详情页']],

      records: {},
      imgPrefix: '',

      outlookPhoto: '', // 门头照
      insideLookPhoto: [], // 内部照
      bessinessDetail: {}, // 营业执照信息
      personalCount: {}, // 工作人员信息
      publicSecurityDetail: {}, // 安防信息
      companyDetailInfo: {}, // 营业场所信息
      checkTaskList: [], // 最新检查记录
      industryFeaturesList: [], // 最新检查记录

      securitySystemImgList: [],

      outInfo: {},
      auditInfo: {},
      legalInfo: {},
      dutyPersonInfo: {},
      companyInfo: {},
      informationInfo: {},
      policeUserInfo: {},
      policeAgencyInfo: {},
      policeJurisdictionInfo: {},

      houseNatureType: [],
      houseOwnershipType: [],
      houseStructureType: [],
    }
  },
  mounted() {
    let params = {
      id: this.$route.query.companyMessageId,
      companyChangeRecordId: this.$route.query.companyChangeRecordId,
    }
    this.getRecord(params)
    this.getDict()
  },
  methods: {
    async getRecord(params) {
      let {
        result: {
          outInfo,
          auditInfo,
          legalInfo,
          dutyPersonInfo,
          companyInfo,
          informationInfo,
          policeUserInfo,
          policeAgencyInfo,
          policeJurisdictionInfo,
        },
      } = await companyRecord(params)
      this.outInfo = outInfo
      this.auditInfo = auditInfo
      this.legalInfo = legalInfo
      this.dutyPersonInfo = dutyPersonInfo
      this.companyInfo = companyInfo
      this.informationInfo = informationInfo
      this.policeUserInfo = policeUserInfo
      this.policeAgencyInfo = policeAgencyInfo
      this.policeJurisdictionInfo = policeJurisdictionInfo

      this.getCompanyPhoto(companyInfo.id)
      this.getBessinessDetail(companyInfo.id)
      this.getPersonalCount(companyInfo.id)
      this.getCompanyInfo(companyInfo.id)
      this.getIndustryFeaturesList(companyInfo.id)
      this.getPublicSecurityDetail(companyInfo.id)
      this.getCheckTask(companyInfo.id, policeAgencyInfo.id)
    },

    async getCompanyPhoto(id) {
      let { result: outlookPhoto } = await getAction('/sys/images_path/list', { bizId: id, bizType: 4 })
      let { result: insideLookPhoto } = await getAction('/sys/images_path/list', { bizId: id, bizType: 5 })
      this.outlookPhoto = outlookPhoto.length > 0 ? outlookPhoto[0].path : ''
      this.insideLookPhoto = insideLookPhoto
    },

    async getBessinessDetail(id) {
      let { result } = await getAction('/company/message/business_detail', { companyId: id })
      this.bessinessDetail = result
    },

    async getPersonalCount(id) {
      let { result } = await getAction('/company/message/total', { companyId: id })
      this.personalCount = result
    },

    async getCompanyInfo(id) {
      let { result } = await getAction('/company/info_detail/find_company', { companyId: id })
      this.companyDetailInfo = result
      // console.log(this.companyDetailInfo, 'this.companyDetailInfo  ying ye chang suo')
    },

    async getCheckTask(companyMessageId, policeAgencyId) {
      let {
        result: { records },
      } = await getAction('/police/check_task/page', { companyMessageId, policeAgencyId, checkType: 1, checkStatus: 3 })
      this.checkTaskList = records.slice(0, 3)
      // console.log(this.checkTaskList, 'this.checkTaskList')
    },

    async getIndustryFeaturesList(id) {
      let { result } = await getAction('/industry/industry_features/company_list', { companyId: id })
      this.industryFeaturesList = result
      // console.log(this.industryFeaturesList, 'this.industryFeaturesList')
    },

    async getPublicSecurityDetail(id) {
      let { result } = await getAction('/industry/public_security/status', { companyId: id })
      this.publicSecurityDetail = result
      // console.log(this.publicSecurityDetail, 'this.publicSecurityDetail')
    },

    jumpGoover(checkResult) {
      // 查看全部检查记录
      if (this.checkTaskList.length == 0) {
        this.$message.error('暂无检查记录')
        return
      }
      let checkTime = this.checkTaskList[0]
      let queryParam = {
        policeAgencyId: checkTime.policeAgencyId,
        companyMessageId: checkTime.companyMessageId,
        companyMessageName: checkTime.companyMessageName,
      }
      if (typeof checkResult == 'number') queryParam.checkResult = checkResult
      this.$router.push({ path: '/goover/index', query: queryParam })
    },

    jumpPractitioners() {
      // 查看全部从业人员
      let queryParam = {
        companyId: this.companyInfo.id,
        policeAgencyId: this.policeAgencyInfo.id,
        companyName: this.companyInfo.companyName,
      }
      this.$router.push({ path: '/practitioners/index', query: queryParam })
    },

    showSignPage() {
      this.$refs.signPage.show({ id: this.companyInfo.id })
    },

    async showColumnInfo(type, status) {
      if (status == 0) {
        this.$message.error('暂未完善')
        return
      }
      // type  1 xiaofang 2 wufang 3 anquan 4 jifang 5 renfang
      if (type == 1) {
        this.$refs.fireFacilitiesModel.show({ status, companyId: this.companyInfo.id })
      } else if (type == 2) {
        this.$refs.physicalDefenseModel.show({ status, companyId: this.companyInfo.id })
      } else if (type == 3) {
        this.$refs.saveModel.show({ bizid: this.publicSecurityDetail.id, companyId: this.companyInfo.id })
      } else if (type == 4) {
        this.$refs.securityFacilitiesModel.show({ status, companyId: this.companyInfo.id })
      } else if (type == 5) {
        this.$refs.airDefenceModel.show({ status, companyId: this.companyInfo.id })
      }
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    werImg2(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    industryTypeClick(item) {
      if (item.industryFeaturesName == '从业人员') {
        this.jumpPractitioners()
      } else if (item.industryFeaturesName == '行业信息') {
        this.$refs.industryInfo.show({ companyId: this.companyInfo.id })
      } else if (item.industryFeaturesName == '房客信息') {
        this.$refs.tenant.show({ id: this.companyInfo.id })
      } else if (item.industryFeaturesName == '特行证书') {
        this.$refs.certificateDetail.show(this.companyInfo.id)
      }
    },

    async getDict() {
      const dictCodes = ['house_nature_type', 'house_ownership_type', 'house_structure_type']
      const dictResults = await Promise.all(dictCodes.map((code) => findEnableDictItemsbyCode({ code })))
      this.houseNatureType = dictResults[0].result
      this.houseOwnershipType = dictResults[1].result
      this.houseStructureType = dictResults[2].result
    },

    getDictType(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },
  },
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 0 0.16rem;
  padding-bottom: 0.1rem;
  background: var(--theme-content-bg);

  .p-16 {
    padding: 0 0.16rem;
  }

  .common-title {
    .icon {
      width: 3px;
      height: 9px;
      background: #aed6ff;
      display: inline-block;
      margin-right: 4px;
    }
    padding: 0.16rem 0 0.13rem 0;
    font-size: 0.14rem;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #aed6ff;
    border-bottom: 1px dashed var(--theme-input-border);
  }

  .form-item {
    font-size: 0.14rem;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    display: flex;

    .label {
      width: 0.88rem;
      font-weight: 500;
      color: #317bc8;
      text-align: right;
      margin-right: 5px;
    }

    .value {
      color: var(--theme-modal-label-value-color);
    }

    .click {
      color: #47e829;
      cursor: pointer;
    }
  }

  .info-item {
    font-size: 0.14rem;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.18rem;

    .info {
      color: #317bc8;
    }

    .boolean {
      color: var(--theme-modal-label-value-color);
    }
  }

  .bottom-info {
    padding: 0.1rem 0;
  }

  .left {
    .left-top {
      background: var(--theme-container-bg);
      height: 3.84rem;
      padding: 0.32rem 0.16rem 0.18rem 0.16rem;

      .company-title {
        font-size: 0.16rem;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #b5daff;

        img {
          width: 0.56rem;
          height: 0.56rem;
          border-radius: 4px;
          margin-right: 10px;
        }
        .company-industry {
          img {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
          font-size: 0.14rem;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: var(--theme-modal-label-value-color);
        }
      }

      .inside-pic {
        position: relative;
        margin: 0.2rem 0 0.16rem 0;
        img {
          width: 100%;
          height: 2.32rem;
          border-radius: 8px;
          // object-fit: scale-down;
          object-fit: cover;
          // object-fit: contain;
          // object-fit: fill;
        }
        .img-count {
          position: absolute;
          right: 10px;
          bottom: 10px;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #b5daff;
          align-items: center;

          img {
            width: 0.16rem;
            height: 0.14rem;
            border-radius: 0;
            margin-right: 0.05rem;
          }
        }
      }

      .company-address {
        font-size: 0.14rem;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: var(--theme-modal-label-value-color);
        img {
          width: 0.15rem;
          margin-right: 5px;
        }
      }
    }
    .left-mid {
      background: var(--theme-container-bg);
      margin: 0.1rem 0;
      height: 1.6rem;
    }
    .left-bot {
      background: var(--theme-container-bg);
      height: 2.48rem;
    }
  }

  .mid {
    margin: 0 0.16rem;
    .mid-top {
      background: var(--theme-container-bg);
      height: 1.5rem;

      .bottom-common-wrap {
        .count-wrap {
          font-weight: 500;
          display: flex;
          align-items: center;

          img {
            width: 0.64rem;
            height: 0.64rem;
            margin-right: 12px;
            cursor: pointer;
          }

          .count-info {
            font-size: 0.14rem;
            font-family: PingFang SC-Medium, PingFang SC;
            color: var(--theme-modal-label-value-color);
          }

          .count-num {
            font-size: 0.24rem;
            font-family: DIN-Medium, DIN;
            color: #29e1e8;
          }

          .c-g {
            color: #5bdc26;
          }

          .c-r {
            color: #ff5e5e;
          }

          .c-o {
            color: #e8b529;
          }
        }
      }
    }
    .mid-mid-1 {
      margin-top: 0.1rem;
      height: 2.24rem;

      .mid-1-left {
        background: var(--theme-container-bg);
        margin-right: 0.16rem;
      }

      .mid-1-right {
        background: var(--theme-container-bg);
      }
    }
    .mid-mid-2 {
      background: var(--theme-container-bg);
      margin: 0.1rem 0;
      height: 1.6rem;

      .bottom-common-wrap {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        // width: 168px;
        // height: 80px;

        .facilities-column {
          padding: 0.15rem;
          background: var(--theme-content-item-bg);
          border-radius: 4px;
          margin: 0.15rem 0;
          margin-right: 16px;
          &:last-child {
            margin-right: 0;
          }
          img {
            // width: .44rem;
            // height: .44rem;
            margin-right: 0.12rem;
          }
          .context-name {
            color: var(--theme-modal-label-value-color);
          }
          .context-status {
            color: #317bc8;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .jump {
            color: var(--theme-modal-label-value-color);
            cursor: pointer;
          }
        }
      }
    }
    .mid-bot {
      background: var(--theme-container-bg);
      height: 2.48rem;

      .bottom {
        margin: 0.15rem 0;
      }

      .bottom-left {
        flex: 4;
        border-right: 1px solid #0b4884;
      }
      .bottom-right {
        flex: 6;
      }
    }
  }

  .right {
    .right-top {
      background: var(--theme-container-bg);
      height: 1.5rem;

      .bottom-info {
        position: relative;

        img {
          position: absolute;
          right: 0.1rem;
          width: 0.64rem;
          height: 0.8rem;
          border-radius: 4px;
        }
      }
    }
    .right-mid {
      background: var(--theme-container-bg);
      margin: 0.1rem 0;
      height: 4.8rem;

      .bottom-info {
        height: 1.3rem;
        max-height: 1.4rem;
        border-bottom: 1px solid var(--theme-input-border);
        &:last-child {
          border: none;
        }
      }
    }
    .right-bot {
      background: var(--theme-container-bg);
      height: 1.6rem;

      .industry-bottom {
        padding: 0.18rem;
        .industry-info-wrap {
          margin-right: 30px;
          display: flex;
          flex-direction: column;
          align-items: center;
          &:last-child {
            margin-right: 0;
          }
          img {
            width: 0.48rem;
            height: 0.48rem;
            cursor: pointer;
            border-radius: 8px;
          }
          .name {
            font-size: 14px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #509eee;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>
